<template>
  <div class="warp">
    <ul class="item">
      <li class="list head">
        <span class="data1">序号</span>
        <span class="data2">行业分类</span>
        <span class="data3">数量(家)</span>
      </li>
      <vue3-seamless-scroll
        :list="datalist"
        class="tablescroll"
        :hover="true"
        :step="1"
      >
        <li v-for="(item, index) in datalist" :key="index" class="list">
          <span class="data1 line-clamp-2">
            <span
              class="center"
              :class="
                item.id == 1
                  ? 'tdid-1'
                  : item.id == 2
                  ? 'tdid-2'
                  : item.id == 3
                  ? 'tdid-3'
                  : 'tdid-qt'
              "
              >{{ item.id }}</span
            ></span
          >
          <span class="data2 line-clamp-2">{{ item.name }}</span>
          <span class="data3 line-clamp-2">{{ item.num }}</span>
        </li>
      </vue3-seamless-scroll>
    </ul>
  </div>
</template>
<script setup>
const props = defineProps({
  datalist: {
    type: Array,
    require: true,
    default: [
      { id: 1, name: "行业分类1", num: 10 },
      { id: 2, name: "行业分类2", num: 20 },
      { id: 3, name: "行业分类3", num: 30 },
      { id: 4, name: "行业分类4", num: 40 },
      { id: 5, name: "行业分类5", num: 50 },
      { id: 6, name: "行业分类6", num: 60 },
      { id: 7, name: "行业分类7", num: 70 },
      { id: 8, name: "行业分类8", num: 80 },
      { id: 9, name: "行业分类9", num: 90 },
      { id: 10, name: "行业分类10", num: 100 },
      { id: 11, name: "行业分类11", num: 110 },
      { id: 12, name: "行业分类12", num: 120 },
      { id: 13, name: "行业分类13", num: 130 },
      { id: 14, name: "行业分类14", num: 140 },
      { id: 15, name: "行业分类15", num: 150 },
      { id: 16, name: "行业分类16", num: 160 },
      { id: 17, name: "行业分类17", num: 170 },
      { id: 18, name: "行业分类18", num: 180 },
      { id: 19, name: "行业分类19", num: 190 },
      { id: 20, name: "行业分类20", num: 200 },
      { id: 1, name: "行业分类1", num: 10 },
      { id: 2, name: "行业分类2", num: 20 },
      { id: 3, name: "行业分类3", num: 30 },
      { id: 4, name: "行业分类4", num: 40 },
      { id: 5, name: "行业分类5", num: 50 },
      { id: 6, name: "行业分类6", num: 60 },
      { id: 7, name: "行业分类7", num: 70 },
      { id: 8, name: "行业分类8", num: 80 },
      { id: 9, name: "行业分类9", num: 90 },
      { id: 10, name: "行业分类10", num: 100 },
      { id: 11, name: "行业分类11", num: 110 },
      { id: 12, name: "行业分类12", num: 120 },
      { id: 13, name: "行业分类13", num: 130 },
      { id: 14, name: "行业分类14", num: 140 },
      { id: 15, name: "行业分类15", num: 150 },
      { id: 16, name: "行业分类16", num: 160 },
      { id: 17, name: "行业分类17", num: 170 },
      { id: 18, name: "行业分类18", num: 180 },
      { id: 19, name: "行业分类19", num: 190 },
      { id: 20, name: "行业分类20", num: 200 },
    ],
  },
});
</script>
<style lang="scss" scoped>
.warp {
  width: calc(100%);
  // transform: translateX(-20px);
  overflow: hidden;
  position: relative;
}
li {
  justify-content: space-between;
  align-items: center;
}

.list {
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.data1 {
  width: 25%;
  text-align: center;
  // border: 1px solid #fff;
}
.data2 {
  width: 50%;
  text-align: center;
}
.data3 {
  width: 25%;
  text-align: center;
}

.item {
  width: 100%;
  background-image: url("@/assets/images/Group 401488@2x.png");
  background-attachment: fixed;
  background-size: 100% 60px;
  background-repeat: no-repeat;
}
.head {
  line-height: 40px;
}
.tablescroll {
  width: 100%;
  height: 790px;
  // height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.tdid-1 {
  width: 26px !important;
  height: 26px !important;
  text-align: center;
  line-height: 26px;
  background-color: rgba($color: #ff7734, $alpha: 0.5);
  border: 1px solid #ff7734;
  display: block;
}
.tdid-2 {
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  background-color: rgba($color: #fac300, $alpha: 0.5);
  border: 1px solid #fac300;
  display: block;
}
.tdid-3 {
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  background-color: rgba($color: #34ffe7, $alpha: 0.5);
  border: 1px solid #34ffe7;
  display: block;
}
.tdid-qt {
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  background-color: rgba($color: #0066af, $alpha: 0.5);
  border: 1px solid #0066af;
  display: block;
}
.center {
  transform: translateX(calc(50% + 24px));
}
.list:nth-of-type(even) {
  background-color: rgba($color: #048cf1, $alpha: 0.2);
}
</style>
